
// hook
// Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
import React from 'react'
import { useState } from 'react'

// console.dir(useState);
  /* 
  useState:
    - 让函数式组件支持state状态
    - useState() 方法里面唯一的参数就是初始 state
    - useState返回一个只有两个元素的数组
      - 第一个元素是当前的 state 的值
      - 第二个元素是一个函数,用来替换原来state中的值,这个函数的修改state和setState一样是异步的
    - React 会在重复渲染时记住它当前state的值，并且提供最新的值给我们的函数
*/

/* 
useState
是react身上的方法
它是一个函数
里面有一个参数 值是 方法里面唯一的参数就是初始 state
函数有返回值
它的返回值是一个数组
因为是一个数组 所有可以用解构的形式将里面的值接受出来
第一个值是初始值 第二个是一个函数 用来替换原来useState(0)内的值
etCount(count + 1)
*/

export default function App() {

  const[count,setCount] = useState(0)
  const[isHot,setIshot] =useState(true)
  //事件绑定绑在原型上也可以直接榜

  let  add =()=>{
    // count+=1
    setCount(count + 1)
  }

  console.log("组件被重新渲染了");


  return (
    <div>
      <h2>这是改变的值{count}</h2>
      {/* <button onClick={()=>{setCount(count+1)}}>累加</button> */}
      <button onClick={add}>累加</button>
      <h4>今天的天气真的{isHot?"热啊":"冷吖"}</h4>
    </div>

  )
}
